<template>
  <div class="loginbody">
    <div class="logindata">
      <div class="logintext">
        <h2>Welcome</h2>
      </div>
      <input type="text" v-model="phone" placeholder="手机号" ><br>
      <input type="text" v-model="code" placeholder="短信验证码" class="input"><br>
      <button @click="send_code()" class="button1">{{msgButton}}</button><br>
      <button @click="login" class="button2">登录</button>

    </div>

  </div>
</template>

<script>
import Axios from 'axios'

export default {
    data(){
        return{
            phone:"",
            code:"",
            msgButton:"获取短信验证码 "
        }
    },
    methods:{
        send_code(){    
            // 1、验证手机号是否为空
            if (!this.phone) {
            this.message = "手机号不能为空";
            this.$message.info("请勿频繁点击")
            return false;
            }
            // 
            // else if (this.msgButton != "获取短信验证码") {
            // this.message = "已发送";
            // alert(this.message);
            // return false;
            // }
            
            // 2、正则验证手机号格式
            var reg = new RegExp(/^[1][34578][0-9]{9}$/);
            if (!reg.test(this.phone)) //检测字符串是否符合正则表达式
            {
            this.message = "手机号格式不正确";
            alert(this.message);
            return false;
            }

            // 3、发送请求
            Axios.get("/user/getphonecode/",{params:{phone:this.phone}}).then((resp)=>{
                // console.log(resp.data)
            if (resp.data.code == 200) {



            // 定义一个变量计时，并把他传给msgBu
            let t = 60;
            let si = setInterval(() => {
            this.msgButton = t;
            t = t - 1;
            if (t == 0) {
              this.is_send = false;
              this.msgButton = "获取短信验证码";
              clearInterval(si);
            }
          }, 1000);
          } else {
            alert(resp.data.msg)
          }
                
            }).catch((err)=>{
                console.log(err)
            })
        },
        login(){
            // 1、验证手机号是否为空
            if (!this.phone) {
            this.message = "手机号不能为空";
            alert(this.message);
            return false;
            }
            
            // 2、正则验证手机号格式
            var reg = new RegExp(/^[1][34578][0-9]{9}$/);
            if (!reg.test(this.phone)) //检测字符串是否符合正则表达式
            {
            this.message = "手机号格式不正确";
            alert(this.message);
            return false;
            }

            Axios.post('/user/login/',{
                  phone:this.phone,
                  code:this.code
              }).then((resp)=>{
                  if(resp.data.code == 200){
                    localStorage.setItem('id',resp.data.data.id)
                    localStorage.setItem('username',resp.data.data.username)
                    // alert("跳转")
                    this.$router.push({ path:'/home'})
                  }
                  else{
                    alert(resp.data.msg)
                  }
              }).catch((err)=>{
                  console.log(err)
              })
        }
    }
    
}
</script>

<style>
.loginbody {
  width: 100%;
  height: 100%;
  min-width: 1000px;
  background-image: url("../assets/321.jpg");
  background-size: 100% 100%;
  background-position: center center;
  overflow: auto;
  background-repeat: no-repeat;
  position: fixed;
  line-height: 100%;
  padding-top: 150px;
  top:0px;
  left:0px;
}
.logindata {
  width: 40%;
  height: 30%;
  transform: translate(-50%);
  margin-left: 50%;
}
.logintext {
  margin-bottom: 20px;
  line-height: 50px;
  text-align: center;
  font-size: 30px;
  font-weight: bolder;
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

.input{
  /* top:10px; */
  margin-top: 10px;
}
.button1{
  margin-top: 10px;
  width: 100px;
  font-size: 10px;
  /* background-color: white; */
  /* border-block: 0px; */
}
.button2{
  margin-top: 10px;
  width: 80px;
  font-size:10px;
}

</style>